<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户角色管理 - 消防工程集团经营管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #f3f4f6;
        }
    </style>
</head>
<body>
    <!-- Sidebar -->
    <div class="fixed left-0 top-0 bottom-0 w-64 bg-gray-900 text-white shadow-lg">
        <div class="p-6 border-b border-gray-800">
            <div class="flex items-center">
                <i class="fas fa-fire-extinguisher text-2xl text-blue-400 mr-3"></i>
                <div>
                    <div class="font-bold text-lg">消防工程集团</div>
                    <div class="text-xs text-gray-400">管理系统</div>
                </div>
            </div>
        </div>
        <nav class="p-4 space-y-2">
            <a href="dashboard.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-chart-line w-5 mr-3"></i>
                <span>数据看板</span>
            </a>
            <a href="project-list.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-building w-5 mr-3"></i>
                <span>项目管理</span>
            </a>
            <a href="purchase-list.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-shopping-cart w-5 mr-3"></i>
                <span>采购管理</span>
            </a>
            <a href="payment-list.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-money-bill-wave w-5 mr-3"></i>
                <span>付款管理</span>
            </a>
            <a href="inventory.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-warehouse w-5 mr-3"></i>
                <span>库存管理</span>
            </a>
            <a href="hr-dashboard.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-users w-5 mr-3"></i>
                <span>人力成本</span>
            </a>
            <a href="system-settings.html" class="flex items-center px-4 py-3 bg-blue-600 rounded-lg text-white">
                <i class="fas fa-cog w-5 mr-3"></i>
                <span>系统管理</span>
            </a>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="ml-64">
        <header class="bg-white shadow-sm border-b border-gray-200 px-8 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="system-settings.html" class="text-gray-600 mr-4">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-bold text-gray-800">用户角色管理</h1>
                </div>
                <button onclick="showAddRoleModal()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                    <i class="fas fa-plus mr-2"></i>新增角色
                </button>
            </div>
        </header>

        <!-- Role List -->
        <main class="p-8">
            <div class="grid grid-cols-3 gap-6">
                <!-- Role Card 1 -->
                <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h3 class="text-lg font-bold text-gray-900 mb-1">系统管理员</h3>
                            <p class="text-sm text-gray-500">拥有系统所有权限</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <button onclick="editRole('admin')" class="text-blue-600 hover:text-blue-800">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button onclick="deleteRole('admin')" class="text-red-600 hover:text-red-800">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-4">
                        <div class="text-xs text-gray-500 mb-2">用户数量：<span class="font-semibold text-gray-700">3人</span></div>
                        <div class="text-xs text-gray-500">创建时间：2024-01-01</div>
                    </div>
                    <div class="border-t border-gray-200 pt-4">
                        <div class="text-xs font-semibold text-gray-700 mb-2">权限范围：</div>
                        <div class="flex flex-wrap gap-1">
                            <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">全部权限</span>
                        </div>
                    </div>
                </div>

                <!-- Role Card 2 -->
                <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h3 class="text-lg font-bold text-gray-900 mb-1">项目经理</h3>
                            <p class="text-sm text-gray-500">项目管理和审批权限</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <button onclick="editRole('pm')" class="text-blue-600 hover:text-blue-800">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button onclick="deleteRole('pm')" class="text-red-600 hover:text-red-800">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-4">
                        <div class="text-xs text-gray-500 mb-2">用户数量：<span class="font-semibold text-gray-700">25人</span></div>
                        <div class="text-xs text-gray-500">创建时间：2024-01-01</div>
                    </div>
                    <div class="border-t border-gray-200 pt-4">
                        <div class="text-xs font-semibold text-gray-700 mb-2">权限范围：</div>
                        <div class="flex flex-wrap gap-1">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">项目管理</span>
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">审批</span>
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">查看</span>
                        </div>
                    </div>
                </div>

                <!-- Role Card 3 -->
                <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-orange-500">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h3 class="text-lg font-bold text-gray-900 mb-1">采购员</h3>
                            <p class="text-sm text-gray-500">采购和库存管理权限</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <button onclick="editRole('purchaser')" class="text-blue-600 hover:text-blue-800">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button onclick="deleteRole('purchaser')" class="text-red-600 hover:text-red-800">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-4">
                        <div class="text-xs text-gray-500 mb-2">用户数量：<span class="font-semibold text-gray-700">8人</span></div>
                        <div class="text-xs text-gray-500">创建时间：2024-01-01</div>
                    </div>
                    <div class="border-t border-gray-200 pt-4">
                        <div class="text-xs font-semibold text-gray-700 mb-2">权限范围：</div>
                        <div class="flex flex-wrap gap-1">
                            <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded">采购管理</span>
                            <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded">库存管理</span>
                            <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded">查看</span>
                        </div>
                    </div>
                </div>

                <!-- Role Card 4 -->
                <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-purple-500">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h3 class="text-lg font-bold text-gray-900 mb-1">财务人员</h3>
                            <p class="text-sm text-gray-500">财务和付款管理权限</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <button onclick="editRole('finance')" class="text-blue-600 hover:text-blue-800">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button onclick="deleteRole('finance')" class="text-red-600 hover:text-red-800">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-4">
                        <div class="text-xs text-gray-500 mb-2">用户数量：<span class="font-semibold text-gray-700">5人</span></div>
                        <div class="text-xs text-gray-500">创建时间：2024-01-01</div>
                    </div>
                    <div class="border-t border-gray-200 pt-4">
                        <div class="text-xs font-semibold text-gray-700 mb-2">权限范围：</div>
                        <div class="flex flex-wrap gap-1">
                            <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">付款管理</span>
                            <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">审批</span>
                            <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">查看</span>
                        </div>
                    </div>
                </div>

                <!-- Role Card 5 -->
                <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-red-500">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h3 class="text-lg font-bold text-gray-900 mb-1">普通员工</h3>
                            <p class="text-sm text-gray-500">基础操作权限</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <button onclick="editRole('employee')" class="text-blue-600 hover:text-blue-800">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button onclick="deleteRole('employee')" class="text-red-600 hover:text-red-800">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-4">
                        <div class="text-xs text-gray-500 mb-2">用户数量：<span class="font-semibold text-gray-700">115人</span></div>
                        <div class="text-xs text-gray-500">创建时间：2024-01-01</div>
                    </div>
                    <div class="border-t border-gray-200 pt-4">
                        <div class="text-xs font-semibold text-gray-700 mb-2">权限范围：</div>
                        <div class="flex flex-wrap gap-1">
                            <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded">申请</span>
                            <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded">查看</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Add/Edit Role Modal -->
    <div id="roleModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900" id="roleModalTitle">新增角色</h3>
                <button onclick="closeRoleModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="roleForm" class="space-y-6">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">角色名称 <span class="text-red-500">*</span></label>
                            <input type="text" placeholder="请输入角色名称" 
                                   class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">角色代码 <span class="text-red-500">*</span></label>
                            <input type="text" placeholder="请输入角色代码（英文）" 
                                   class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">角色描述</label>
                        <textarea placeholder="请输入角色描述" rows="2" 
                                  class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-4">权限配置 <span class="text-red-500">*</span></label>
                        <div class="border border-gray-200 rounded-lg p-4 space-y-4">
                            <!-- Module 1 -->
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" class="mr-2 module-checkbox" data-module="project">
                                        <span class="font-semibold text-gray-800">项目管理</span>
                                    </label>
                                </div>
                                <div class="ml-6 space-y-1">
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="project">
                                        <span>查看</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="project">
                                        <span>新增</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="project">
                                        <span>编辑</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="project">
                                        <span>删除</span>
                                    </label>
                                </div>
                            </div>
                            <!-- Module 2 -->
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" class="mr-2 module-checkbox" data-module="purchase">
                                        <span class="font-semibold text-gray-800">采购管理</span>
                                    </label>
                                </div>
                                <div class="ml-6 space-y-1">
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="purchase">
                                        <span>查看</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="purchase">
                                        <span>新增</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="purchase">
                                        <span>审批</span>
                                    </label>
                                </div>
                            </div>
                            <!-- Module 3 -->
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" class="mr-2 module-checkbox" data-module="payment">
                                        <span class="font-semibold text-gray-800">付款管理</span>
                                    </label>
                                </div>
                                <div class="ml-6 space-y-1">
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="payment">
                                        <span>查看</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="payment">
                                        <span>新增</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="payment">
                                        <span>审批</span>
                                    </label>
                                </div>
                            </div>
                            <!-- Module 4 -->
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" class="mr-2 module-checkbox" data-module="inventory">
                                        <span class="font-semibold text-gray-800">库存管理</span>
                                    </label>
                                </div>
                                <div class="ml-6 space-y-1">
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="inventory">
                                        <span>查看</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="inventory">
                                        <span>入库</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="inventory">
                                        <span>出库</span>
                                    </label>
                                </div>
                            </div>
                            <!-- Module 5 -->
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" class="mr-2 module-checkbox" data-module="hr">
                                        <span class="font-semibold text-gray-800">人力成本</span>
                                    </label>
                                </div>
                                <div class="ml-6 space-y-1">
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="hr">
                                        <span>查看</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="hr">
                                        <span>编辑</span>
                                    </label>
                                </div>
                            </div>
                            <!-- Module 6 -->
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" class="mr-2 module-checkbox" data-module="system">
                                        <span class="font-semibold text-gray-800">系统管理</span>
                                    </label>
                                </div>
                                <div class="ml-6 space-y-1">
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="system">
                                        <span>用户管理</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="system">
                                        <span>角色管理</span>
                                    </label>
                                    <label class="flex items-center text-sm text-gray-600">
                                        <input type="checkbox" class="mr-2" data-module="system">
                                        <span>系统配置</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="sticky bottom-0 bg-gray-50 border-t border-gray-200 px-6 py-4 flex items-center justify-end gap-3">
                <button onclick="closeRoleModal()" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
                    取消
                </button>
                <button onclick="saveRole()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    保存
                </button>
            </div>
        </div>
    </div>

    <script>
        function showAddRoleModal() {
            document.getElementById('roleModalTitle').textContent = '新增角色';
            document.getElementById('roleForm').reset();
            document.getElementById('roleModal').classList.remove('hidden');
        }

        function editRole(roleId) {
            document.getElementById('roleModalTitle').textContent = '编辑角色';
            // Load role data here
            document.getElementById('roleModal').classList.remove('hidden');
        }

        function deleteRole(roleId) {
            if (confirm('确定要删除该角色吗？删除后该角色的用户将无法登录系统。')) {
                // Delete logic here
                alert('角色删除成功！');
            }
        }

        function closeRoleModal() {
            document.getElementById('roleModal').classList.add('hidden');
        }

        function saveRole() {
            // Save logic here
            alert('角色保存成功！');
            closeRoleModal();
        }

        // Module checkbox select all
        document.querySelectorAll('.module-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const module = this.dataset.module;
                const subCheckboxes = document.querySelectorAll(`input[data-module="${module}"]:not(.module-checkbox)`);
                subCheckboxes.forEach(cb => {
                    cb.checked = this.checked;
                });
            });
        });
    </script>
</body>
</html>

